---
title: विकास और निर्माण करें
description: 'किसी नए प्रोजेक्ट पर काम कैसे शुरू करें?'
i18nReady: true
---
import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
import ReadMore from '~/components/ReadMore.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

अब जब आपके पास एस्ट्रो प्रोजेक्ट है तो आप एस्ट्रो के साथ निर्माण के लिए तैयार हैं! 🚀

## अपना प्रोजेक्ट संपादित (एडिट) करें

अपने प्रोजेक्ट में बदलाव करने के लिए, अपने कोड एडिटर में अपना प्रोजेक्ट फ़ोल्डर खोलें। डेव सर्वर चालू करके डेवलपमेंट मोड में काम करने से आप कोड को संपादित करते समय अपनी साइट पर अपडेट देख सकते हैं।

आप यह भी कर सकते हैं [अपने विकास पर्यावरण के पहलुओं को अनुकूलित करें](#अपना-डेव-एनवायरनमेंट-कॉन्फ़िगर-करें) जैसे कि टाइपस्क्रिप्ट को कॉन्फ़िगर करना या आधिकारिक एस्ट्रो एडिटर एक्सटेंशन स्थापित करना।

### एस्ट्रो डेव सर्वर शुरू करें

एस्ट्रो एक बिल्ट-इन डेवलपमेंट सर्वर के साथ आता है जिसमें प्रोजेक्ट डेवलपमेंट के लिए आपकी ज़रूरत की हर वस्तु उपलब्ध है। `astro dev` CLI कमांड स्थानीय डेवलपमेंट सर्वर को शुरू कर देगा ताकि आप अपनी नई वेबसाइट को पहली बार एक्शन में देख सकें।

हर स्टार्टर टेम्पलेट एक पूर्व-कॉन्फ़िगर स्क्रिप्ट के साथ आता है जो आपके लिए `astro dev` चलाएगा। अपनी प्रोजेक्ट निर्देशिका में नेविगेट करने के बाद, इस कमांड को चलाने के लिए अपने पसंदीदा पैकेज मैनेजर का उपयोग करें और एस्ट्रो डेवलपमेंट सर्वर शुरू करें।

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run dev
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run dev
  ```
  </Fragment>
</PackageManagerTabs>


अगर सब कुछ ठीक रहा, तो एस्ट्रो अब आपके प्रोजेक्ट को [http://localhost:4321/](http://localhost:4321/) पर पेश करेगा। अपने ब्राउज़र में उस लिंक पर जाएँ और अपनी नई साइट देखें!

### डेवलपमेंट मोड में कार्य करें

एस्ट्रो आपके `src/` निर्देशिका (डायरेक्टरी) में लाइव फ़ाइल परिवर्तनों को सुनेगा और आपके निर्माण के दौरान आपकी साइट पूर्वावलोकन को अपडेट करेगा, इसलिए आपको विकास के दौरान परिवर्तन करते समय सर्वर को पुनः आरंभ करने की आवश्यकता नहीं होगी। जब डेव सर्वर चल रहा होगा, तो आप हमेशा अपने ब्राउज़र में अपनी साइट का अप-टू-डेट संस्करण देख पाएंगे।

ब्राउज़र में अपनी साइट देखते समय, आपके पास [एस्ट्रो डेव टूलबार](/hi/guides/dev-toolbar/) तक पहुंच होगी। जैसे-जैसे आप निर्माण करेंगे, यह आपको अपने [इसलैंड्स](/hi/concepts/islands/) का निरीक्षण करने, पहुंच-योग्यता संबंधी समस्याओं का पता लगाने और बहुत कुछ करने में मदद करेगा।

यदि आप डेव सर्वर शुरू करने के बाद ब्राउज़र में अपना प्रोजेक्ट नहीं खोल पा रहे हैं, तो उस टर्मिनल पर वापस जाएँ जहाँ आपने `dev` कमांड चलाया था और प्रदर्शित संदेश की जाँच करें। यह आपको बताएगा कि क्या कोई त्रुटि हुई है, या क्या आपका प्रोजेक्ट [http://localhost:4321/](http://localhost:4321/) के अलावा किसी अन्य URL पर प्रस्तुत किया जा रहा है।

## अपनी साइट बनाएं और उसका पूर्वावलोकन करें

बिल्ड समय पर बनाई जाने वाली आपकी साइट का वर्शन जांचने के लिए, डेव सर्वर से बाहर निकलें (<kbd>Ctrl</kbd> + <kbd>C</kbd>) और अपने टर्मिनल में अपने पैकेज मैनेजर के लिए उपयुक्त बिल्ड कमांड चलाएँ:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run build
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm build
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run build
  ```
  </Fragment>
</PackageManagerTabs>

एस्ट्रो एक अलग फ़ोल्डर (डिफ़ॉल्ट रूप से `dist/`) में आपकी साइट का एक डिप्लॉय-रेडी वर्शन बनाएगा और आप टर्मिनल में इसकी प्रगति देख सकते हैं। यह आपको उत्पादन में डिप्लॉय करने से पहले आपके प्रोजेक्ट में किसी भी बिल्ड एर्रोर्स के बारे में सचेत करेगा। यदि टाइपस्क्रिप्ट को `strict` या `strictest` पर कॉन्फ़िगर किया गया है, तो `build` स्क्रिप्ट आपके प्रोजेक्ट को टाइप त्रुटियों के लिए भी जाँचेगी।

जब बिल्ड समाप्त हो जाए, तो अपने टर्मिनल में उपयुक्त `preview` कमांड (जैसे `npm run preview`) चलाएं और आप अपनी साइट का निर्मित वर्शन उसी ब्राउज़र प्रीव्यू विंडो में स्थानीय रूप से देख सकते हैं।

ध्यान दें कि यह आपके कोड का प्रीव्यू अर्थात पूर्वावलोकन  करता है जैसा कि बिल्ड कमांड को अंतिम बार चलाने पर मौजूद था। इसका उद्देश्य आपको यह प्रीव्यू देना है कि वेब पर तैनात होने पर आपकी साइट कैसी दिखाई देगी। निर्माण के बाद आपके द्वारा अपने कोड में किए गए कोई भी बाद के परिवर्तन तब तक आपकी साइट का प्रीव्यू करते समय दिखाई नहीं देंगे जब तक कि आप बिल्ड कमांड को फिर से नहीं चलाते।

प्रीव्यू से बाहर निकलने के लिए (<kbd>Ctrl</kbd> + <kbd>C</kbd>) का उपयोग करें और एक अन्य टर्मिनल कमांड चलाएं, जैसे कि डेव सर्वर को पुनः आरंभ करके [डेवलपमेंट मोड में कार्य करना](#डेवलपमेंट-मोड-में-कार्य-करें) पर वापस जाएं, जो आपके संपादन के साथ अपडेट होता है और आपके कोड परिवर्तनों का लाइव पूर्वावलोकन दिखाता है।

<ReadMore>[एस्ट्रो सीएलआई](/hi/reference/cli-reference/) और टर्मिनल कमांड के बारे में अधिक पढ़ें, जिनका उपयोग आप एस्ट्रो के साथ निर्माण करते समय करेंगे।</ReadMore>

:::tip
आप बहुत ज़्यादा कोड जोड़ने या बदलने से पहले [अपनी नई साइट को तुरंत तैनात करना](/hi/guides/deploy/) चाह सकते हैं। यह आपकी साइट का न्यूनतम, कार्यशील संस्करण प्रकाशित करने में सहायक है और बाद में अपनी तैनाती के समस्या निवारण में आपका अतिरिक्त समय और प्रयास बचा सकता है।
:::

## अगले कदम

सफलता! अब आप एस्ट्रो के साथ निर्माण शुरू करने के लिए तैयार हैं! 🥳

यहाँ कुछ चीजें हैं जिन्हें हम आगे पढ़ने की सलाह देते हैं। आप उन्हें किसी भी क्रम में पढ़ सकते हैं। आप हमारे दस्तावेज़ों को थोड़ी देर के लिए छोड़ सकते हैं और अपने नए एस्ट्रो प्रोजेक्ट कोडबेस में खेल सकते हैं, जब भी आपको कोई परेशानी हो या कोई सवाल हो तो यहाँ वापस आएँ।

### अपना डेव एनवायरनमेंट कॉन्फ़िगर करें

अपने डेवलपमेंट अनुभव को अनुकूलित करने के लिए नीचे दिए गए मार्गदर्शिकाओं का अन्वेषण करें।

<CardGrid>
  <LinkCard
    title="एडिटर सेटअप"
    description="एस्ट्रो डेवलपर अनुभव को बेहतर बनाने और नई सुविधाओं को अनलॉक करने के लिए अपने कोड संपादक को अनुकूलित करें।"
    href="/hi/editor-setup/"
  />
  <LinkCard
    title="डेव टूलबार"
    description="डेव टूलबार की उपयोगी विशेषताओं का अन्वेषण करें."
    href="/hi/guides/dev-toolbar/"
  />
  <LinkCard
    title="टाइपस्क्रिप्ट कॉन्फ़िगरेशन"
    description="टाइप-चेकिंग, इंटेलिसेंस, आदि के लिए विकल्प कॉन्फ़िगर करें।"
    href="/hi/guides/typescript/"
  />
</CardGrid>

### एस्ट्रो की विशेषताएं जानें

<CardGrid>
  <LinkCard
    title="अपने कोडबेस को समझें"
    description="हमारी प्रोजेक्ट संरचना मार्गदर्शिका में एस्ट्रो की फ़ाइल संरचना के बारे में जानें।"
    href="/hi/basics/project-structure/"
  />
  <LinkCard
    title="कंटेंट कलेक्शन बनाएँ"
    description="अपनी नई साइट पर फ्रंटमैटर सत्यापन और स्वचालित प्रकार-सुरक्षा के साथ कंटेंट जोड़ें।"
    href="/hi/guides/content-collections/"
  />
    <LinkCard
    title="व्यू संक्रमण जोड़ें"
    description="निर्बाध पृष्ठ संक्रमण और एनिमेशन बनाएं."
    href="/hi/guides/view-transitions/"
  />
  <LinkCard
    title="आइलैंड के बारे में जानें"
    description="ास्त्रो के द्वीप वास्तुकला के बारे में पढ़ें।"
    href="/hi/concepts/islands/"
  />
</CardGrid>

### परिचयात्मक ट्यूटोरियल लें

हमारे [परिचयात्मक ट्यूटोरियल](/hi/tutorial/0-introduction/) में एक खाली पृष्ठ से शुरू करके एक पूरी तरह कार्यात्मक एस्ट्रो ब्लॉग बनाएं।

यह देखने का एक शानदार तरीका है कि एस्ट्रो कैसे काम करता है और आपको पेज, लेआउट, कंपोनेंट्स, रूटिंग, आइलैंड और बहुत कुछ की मूल बातें बताता है। इसमें सामान्य रूप से वेब डेवलपमेंट अवधारणाओं के लिए नए लोगों के लिए एक वैकल्पिक, शुरुआती-अनुकूल इकाई भी शामिल है, जो आपको अपने कंप्यूटर पर आवश्यक एप्लिकेशन इंस्टॉल करने, GitHub खाता बनाने और अपनी साइट को तैनात करने के माध्यम से मार्गदर्शन करेगी।
